<template>
  <div class="careerPathTools">
    <div class="careerPathTools-top">
      <div class="careerPathTools-top-left">职途求职工具</div>
      <div
        class="careerPathTools-top-right"
        v-if="roleType == '20' && this.qrCodeBase64 && this.sharePicLink"
        @click="shareClick()"
      >
        <div class="careerPathTools-top-right-title">分享</div>
        <i
          class="el-icon-arrow-right el-icon--right"
          style="align-self: center; margin-left: 0px"
        ></i>
      </div>
    </div>
    <div class="careerPathTools-item">
      <el-tooltip
        v-for="(item, index) in careerToolsList"
        :key="index"
        placement="bottom-end"
        effect="light"
        popper-class="careerToolsItemPopper"
        :disabled="item.rightId == 77"
      >
        <div slot="content" v-if="item.valid">
          <img :src="item.qrCodeUrl" alt="" />
          <p>扫码体验{{ item.title }}服务</p>
        </div>
        <el-empty
          slot="content"
          class="empty"
          description="该校未开通此服务"
          v-else
          ><el-button
            type="primary"
            size="medium"
            @click="handleRightQrCode(item)"
          >
            我想要了解
          </el-button>
        </el-empty>
        <div class="careerPathTools-item-left" @click="itemClick(item)">
          <img class="careerPathTools-item-left-img" :src="item.img" alt="" />
          <div class="careerPathTools-item-left-name">{{ item.title }}</div>
        </div>
      </el-tooltip>
    </div>
    <el-dialog
      class="salaryPkDialog"
      :visible.sync="dialogTableVisible"
      width="270px"
      append-to-body
      :close-on-click-modal="false"
      top="32vh"
    >
      <salaryPK
        class="jobSearchSideItem salaryPk"
        @handleSalaryPKConfirm="dialogTableVisible = false"
      />
    </el-dialog>
    <el-dialog
      class="shareDialog"
      :visible.sync="dialogShareVisible"
      width="460px"
      append-to-body
      :close-on-click-modal="false"
      top="28vh"
    >
      <div class="shareDialog-content">
        <div class="shareDialog-left">
          <div class="shareDialog-left-title">分享方式 ①</div>
          <div class="shareDialog-left-desc">海报</div>
          <img class="shareDialog-left-img" :src="sharePicLink" alt="" />
          <div
            class="shareDialog-left-download"
            @click.stop="handleDownloadClick()"
          >
            下载海报
          </div>
        </div>
        <div class="shareDialog-right">
          <div class="shareDialog-right-title">分享方式 ②</div>
          <div class="shareDialog-right-desc1">扫码转发</div>
          <div class="shareDialog-right-desc2">职途求职工具小程序</div>
          <img class="shareDialog-right-img" :src="qrCodeBase64" alt="" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createQROther,
  getShareQrPictures,
  generateShareQrPictures,
  getShareQrRights
} from '@/api/home';
import { download } from '@/utils/fileSaver';
import salaryPK from './salaryPK';
import { time } from 'echarts';
export default {
  name: 'careerPathTools',
  components: {
    salaryPK
  },
  data() {
    return {
      dialogTableVisible: false,
      dialogShareVisible: false,
      careerToolsList: [
        {
          rightId: 4,
          title: 'AI简历诊断',
          desc: '定位简历问题,分析优劣势,提供建议',
          img: '//img3.job1001.com/ypMp/elan/images/career/careerAssessResult/career_path_icon1.png',
          qrCodeUrl: '',
          valid: false, //权限判断,
          parentId: 11, //后台说只要匹配到父级，那么子几肯定会有这个权益
          etId: 40024 //埋点id
        },
        {
          rightId: 17,
          title: 'AI面评',
          desc: '线上模拟面试,专业题库,专业评估',
          img: '//img3.job1001.com/ypMp/elan/images/career/careerAssessResult/career_path_icon2.png',
          qrCodeUrl: '',
          valid: false, //权限判断,
          parentId: 16,
          etId: 40025 //埋点id
        },
        {
          rightId: 1,
          title: '性格测评',
          desc: '了解自己的行为表现，适应不同环境',
          img: '//img3.job1001.com/ypMp/elan/images/career/careerAssessResult/career_path_icon3.png',
          qrCodeUrl: '',
          valid: false, //权限判断,
          parentId: 14,
          etId: 40022 //埋点id
        },
        // {
        //   rightId: 2,
        //   title: '职业测评',
        //   desc: '找到最符合自己的性格类型的职业',
        //   img: '//img3.job1001.com/ypMp/elan/images/career/careerAssessResult/career_path_icon4.png',
        //   qrCodeUrl: '',
        //   valid: false, //权限判断,
        //   parentId: 10,
        //   etId: 40023 //埋点id
        // },
        {
          rightId: 7,
          title: '职途报告',
          desc: '生成专属于您的职途报告',
          img: '//img3.job1001.com/ypMp/elan/images/career/careerAssessResult/career_path_icon5.png',
          qrCodeUrl: '',
          valid: false, //权限判断,
          parentId: 21,
          etId: 40026 //埋点id
        },
        {
          rightId: 77,
          title: '查薪酬',
          desc: '实时查薪酬',
          img: '//img3.job1001.com/ypMp/elan/images/career/careerAssessResult/career_path_icon6.png',
          qrCodeUrl: ''
        }
      ],
      roleType: '10', //10代表学生，20代表老师
      qrCodeBase64: '', //分享二维码
      sharePicLink: '', //分享海报链接
      picLoading: false //海报加载状态
    };
  },
  mounted() {
    this.roleType = localStorage.getItem('roleType') || '10';
  },
  created() {
    this.getShareQrRightsFn(); //配置权限
    this.careerToolsList.forEach(async (item) => {
      setTimeout(async () => {
        await this.createQROtherFn(item);
      }, 1500);
    });

    setTimeout(() => {
      this.generateShareQrPicturesFn();
    }, 2000);
  },
  methods: {
    async generateShareQrPicturesFn() {
      if (this.picLoading || !localStorage.getItem('cardType')) {
        return;
      }
      this.picLoading = true;
      const params = {
        path: 'pagesSub/careerGrow/dataCenterShareParse/index',
        scene: `ct=${localStorage.getItem(
          'cardType'
        )}&force=1&role=${localStorage.getItem('roleType')}`,
        customerId: ''
      };
      const res = await generateShareQrPictures(params);
      this.picLoading = false;
      if (res.code == 200) {
        this.checkShareQrPicturesFn();
      } else {
        this.$message.error(res.status_desc);
      }
    },
    async checkShareQrPicturesFn() {
      if (this.picLoading) {
        return;
      }
      this.picLoading = true;
      const res = await getShareQrPictures({ customerId: '' });
      this.picLoading = false;
      if (res.code == 200) {
        const resType = res.data.resType;
        if (resType == '10') {
          //返回状态  10生成成功 20:生成中  30：生成失败缺少参数
          this.sharePicLink = res.data.sharePicLink;
          this.qrCodeBase64 = res.data.qrCodeBase64;
        } else if (resType == '20') {
          setTimeout(() => {
            this.checkShareQrPicturesFn();
          }, 3000);
        } else {
          // this.$message.error(res.status_desc);
          console.log('-------getShareQrPicturesFn-------', res.status_desc);
        }
      } else {
        this.$message.error(res.status_desc);
      }
    },
    // 创建二维码
    async createQROtherFn(careerToolsItem) {
      const cardType = localStorage.getItem('cardType')
        ? localStorage.getItem('cardType')
        : '28';
      //最大32个可见字符
      const params = {
        path: 'pagesSub/careerGrow/dataCenterParse/index',
        scene: `ct=${cardType}&rightId=${
          careerToolsItem.rightId
        }&role=${localStorage.getItem('roleType')}`
      };
      const res = await createQROther(params);
      if (res.code == 200) {
        careerToolsItem.qrCodeUrl = res.data;
      }
    },
    shareClick() {
      if (this.roleType == '10') {
        return;
      }
      this.$bus.$emit('generalReportAction', {
        etId: 40008,
        personId: localStorage.getItem('personId'),
        cardType: localStorage.getItem('cardType'),
        jumpSource: 60,
        sourceType: 60
      });
      this.dialogShareVisible = true;
    },
    itemClick(item) {
      console.log('itemClick', item);
      if (item.rightId == 77) {
        this.$bus.$emit('generalReportAction', {
          etId: localStorage.getItem('roleType') == 20 ? 40009 : 40015,
          personId: localStorage.getItem('personId'),
          cardType: localStorage.getItem('cardType'),
          jumpSource: 60,
          sourceType: 60
        });
        this.dialogTableVisible = true;
      }
    },
    //下载文件
    handleDownloadClick() {
      if (this.sharePicLink == '') {
        return;
      }
      this.$bus.$emit('generalReportAction', {
        etId: 40011,
        personId: localStorage.getItem('personId'),
        cardType: localStorage.getItem('cardType'),
        jumpSource: 60,
        sourceType: 60
      });
      const timestamp = new Date().getTime(); // 获取当前时间戳
      const fileName = 'careerPathShare_' + timestamp.toString(); //
      const suffixList = ['.png', '.jpg', '.gif', '.pdf'];
      const suffix = suffixList.includes(this.sharePicLink.slice(-4))
        ? this.sharePicLink.slice(-4)
        : '.png';
      download(this.sharePicLink, fileName + suffix);
    },
    async getShareQrRightsFn() {
      const res = await getShareQrRights();
      if (res.code == 200) {
        //给每个工具添加权限返回的res.data里包含跟工具对应的权限信息rightId，将valid赋值为true
        this.careerToolsList.forEach((item) => {
          const right = res.data.find((r) => r.rightId === item.parentId);
          if (right) {
            item.valid = true;
          }
        });
      }
    },
    handleRightQrCode(item) {
      console.log('---------->handleRightQrCode', item);
      this.$bus.$emit('generalReportAction', {
        etId: item.etId,
        personId: localStorage.getItem('personId'),
        cardType: localStorage.getItem('cardType'),
        jumpSource: 60,
        sourceType: 60
      });
      setTimeout(async () => {
        this.$message.success('已将意愿反馈给老师');
      }, 500);
    }
  }
};
</script>

<style lang="scss" scoped>
.careerPathTools {
  display: block;
  background-color: #f1f4f9;
  border-radius: 18px;
  margin-bottom: 12px;
  .careerPathTools-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .careerPathTools-top-left {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 16px;
      color: #222222;
    }
    .careerPathTools-top-right {
      display: flex;
      justify-content: center;
      width: 60px;
      height: 24px;
      border-radius: 100px;
      border: 1px solid #3371ff;
      font-size: 14px;
      color: #3371ff;
      cursor: pointer;
      .careerPathTools-top-right-title {
        height: 24px;
        line-height: 24px;
        margin-left: 10px;
      }
    }
  }
  .careerPathTools-item {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    margin-top: 8px;
    .careerPathTools-item-left {
      width: 33%; /* 每个子元素占据50%宽度 */
      display: flex;
      justify-content: center;
      align-items: center; /* 垂直居中 */
      flex-direction: column; /* 如果需要垂直排列子元素 */
      margin: 16px 0px 6px 0px;
      &:last-child {
        cursor: pointer;
      }
      .careerPathTools-item-left-img {
        width: 36px;
        height: 36px;
      }
      .careerPathTools-item-left-name {
        margin-top: 4px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #222222;
        text-align: center;
      }
    }
  }
  .careerToolsItemPopper {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    margin-top: 4px;
  }
}
.salaryPk {
  flex: 0.88;
  z-index: 1;
  margin-bottom: 12px;
  //   min-height: 254px;
  //   max-height: 254px;
  overflow-y: hidden;
}
.salaryPkDialog {
  ::v-deep .el-dialog {
    height: 290px !important;
    background-image: linear-gradient(160deg, #d8ffef, #fff 100px);
    border-radius: 20px !important;
  }
  ::v-deep .el-dialog__body {
    padding: 10px 20px !important;
  }
  ::v-deep .el-dialog__header {
    height: 0px !important;
  }
  ::v-deep .el-dialog__close {
    transform: scale(1.5);
  }
}
.shareDialog {
  ::v-deep .el-dialog {
    height: 415px !important;
    background-image: linear-gradient(180deg, #e0efff 0%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 8px !important;
  }
  ::v-deep .el-dialog__body {
    padding: 10px 20px !important;
  }
  ::v-deep .el-dialog__header {
    height: 0px !important;
  }
  ::v-deep .el-dialog__close {
    transform: scale(1.5);
  }
  .shareDialog-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shareDialog-left {
      display: block;
      width: 50%;
      text-align: center;
      .shareDialog-left-title {
        margin: 0px 32px 8px 32px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 16px;
        color: #141416;
        line-height: 22px;
      }
      .shareDialog-left-desc {
        margin: 14px 32px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #141416;
      }
      .shareDialog-left-img {
        width: 130px;
        height: 230px;
        // margin: 8px 0px;
      }
      .shareDialog-left-download {
        // width: 150px;
        height: 32px;
        margin: 12px 32px;
        background-color: #4880ff;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .shareDialog-right {
      display: block;
      width: 50%;
      text-align: center;
      .shareDialog-right-title {
        margin: 0px 32px 8px 32px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 16px;
        color: #141416;
        line-height: 22px;
      }
      .shareDialog-right-desc1 {
        margin: 32px 32px 0px 32px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #141416;
      }
      .shareDialog-right-desc2 {
        margin: 4px 32px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #141416;
      }
      .shareDialog-right-img {
        width: 155px;
        height: 155px;
        margin: 12px 0px 90px 0px;
        border: #fff solid 3px;
        border-radius: 4px;
      }
    }
  }
}
.empty {
  margin: auto;
  width: 200px;
  height: 220px;
  ::v-deep .el-empty__image {
    width: 120px;
  }
}
</style>
